<template>
  <div class="card-out-container">
    <a-form layout="inline" v-if="showMore">
      <a-form-item :label="$t('other.starving')">
        <a-input v-model:value.trim="queryParam.universal" :placeholder="`${$t('basicData.materialsCode')}/${$t('basicData.materialsName')}`" @keyup.enter="loadData" allowClear />
      </a-form-item>
      <a-form-item :label="$t('common.createDate')">
        <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
          <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <CustomTable storeTableName="processStarvingList" rowKey="id" :loading="loading" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxProps, fixed: 'left'}" :pagination="ipagination" :scroll="{y: showMore? 'calc(100vh - 395px)' : 'calc(100vh - 320px)'}" @change="handleTableChange" :showMore="showMore">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="isEnvLocal" type="primary" @click="syncData(syncDataAry)">{{$t('common.sync')}}</a-button>
          <span v-else>
            <a-button v-if="hasPermission('basic:lackmaterial:add')" type="primary" @click="handleEdit({status:0},false)">{{$t('common.addNew')}}</a-button>
            <a-button ghost v-if="hasPermission('basic:lackmaterial:delete')" type="warning" :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{$t('common.delMore')}}</a-button>
          </span>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button  :placeholder="`${$t('basicData.materialsCode')}/${$t('basicData.materialsName')}`" v-if="!showMore" @search="loadData" />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{$t('common.highFilter')}}</a-button>
        </div>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'code'">
          <span v-if="hasPermission('basic:lackmaterial:get')" class="code-link" @click="handleDrawDetail(scope.record)">{{scope.record.code}} </span>
          <span v-else>{{scope.record.code}}</span>
        </template>
        <template v-else-if="scope.column.key === 'status'">
          <a-switch :disabled="!hasPermission('basic:lackmaterial:edit') || isEnvLocal" :checked="!Boolean(scope.record.status)" @change="(value) => changeStatus(value, scope.record)" />
        </template>
        <template v-else-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button v-if="hasPermission('basic:lackmaterial:edit')" type="link" class="primary-link" @click="handleEdit(scope.record)">{{$t('common.editor')}}</a-button>
            <a-divider type="vertical" />
            <a-button v-if="hasPermission('basic:lackmaterial:delete')" type="link" class="warning-link" :disabled="!Boolean(scope.record.status)" @click="handleDelete(scope.record.id)">{{$t('common.del')}}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>
    <commone-modal ref="modalForm" tableName="processStarving" :cloSapn="24"  layout="vertical" :modalTitle="$t('other.starving')" @ok="modalFormOk">
    </commone-modal>
    <detail-draw ref="detailForm"></detail-draw>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import CommoneModal from '@/components/commonModal/normalModal.vue'
import DetailDraw from './modules/detailDraw.vue'
import { hasPermission } from '@/utils'
import CustomTable from '@/components/commonTable/customTable.vue'
import { normalColumns, localColumns } from './modules/config'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
export default {
  name: 'processStarving',
  mixins: [ListMixinPm],
  components: {
    CommoneModal,
    DetailDraw,
    CustomTable,
    SyncDataModal
  },
  data () {
    return {
      url: {
        list: '/api/basic/lack-material/page',
        delete: '/api/basic/lack-material/delete',
        save: '/api/basic/lack-material/edit',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      fuzzySearchName: 'universal',
      syncDataAry: [{ syncIotCloudDataType: 'ihs:basic:lackMaterial' }]
    }
  },
  methods: {
    hasPermission
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
  }
}
</script>